<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" media="screen" />
    <meta http-equiv="X-UA-Compatible" ;content="IE=edge, chrome=1">
    <link rel="stylesheet" href="./static/css/company-output-value-detail.css">
    <link rel="stylesheet" href="./static/css/commonality.css">
    <link rel="stylesheet" href="lib/layui/css/layui.css" />
    <script src="./static/js/main.js"></script>
    <script src="./static/js/echarts.min.js"></script>
    <script src="./static/js/vue.min.js"></script>
    <script src="./static/js/vue-resource.min.js"></script>
    <script src="./static/laydate/laydate.js"></script>
    <title>企业销量分析</title>
</head>

<body>
    <div class="detail" id="companyOutputValue">
        <div class="nav">
            <div class="nav-bar">
                <ul>
                    <li>
                        <a href="./news-list.html">新闻</a>
                    </li>
                    <li>
                        <a href="./goods-list.html">商品信息</a>
                    </li>
                    <li class="selectBar-bor">
                        <a href="company-list.html">企业信息</a>
                    </li>
                    <li>
                        <a href="./output-value-detail.html">产值分析</a>
                    </li>
                    <li>
                        <a href="./map-detail.html">市场分布</a>
                    </li>
                    <li>
                        <a href="./product-list.html">产销分析</a>
                    </li>
                    <li>
                        <a href="./supply-demand-detail.html">供需分析</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="main">
            <div class="main-mian">
                <div class="main-center">
                    <div class="content-content">
                        <div>
                            <div class="content-name">
                                {{company.name}}
                            </div>
                            <div class="content-message">
                                {{company.contact}}
                            </div>
                            <div class="content-message">
                                {{company.contactWay}}
                            </div>
                            <div class="content-message">
                                {{company.address}}
                            </div>
                            <!-- <div class="content-description content-address">
                                <div>
                                </div>
                                <div>
                                    {{company.contactWay}}
                                </div>
                            </div>
                            <div class="content-description content-address">
                                <div>
                                </div>
                                <div>
                                    {{company.address}}
                                </div>
                            </div> -->
                            <div class="content-description" v-html="company.description">
                                <!-- <div>
                                </div> -->
                            </div>
                        </div>
                    </div>
                    <div class="content-content">
                        <div>
                            <div class="content-search">
                                <div>
                                    统计年份：
                                </div>
                                <div>
                                    <input type="text" id="gdpYears" v-model="gdp.years" required lay-verify="required" placeholder="请选择年份" readonly>
                                </div>
                            </div>
                            <div id="outputValueGdp" class="content-Gdp"></div>
                        </div>
                    </div>
                    <div class="content-content">
                        <div>
                            <div class="content-search">
                                <div>
                                    统计年份：
                                </div>
                                <div>
                                    <input type="text" id="salesYears" v-model="sales.years" required lay-verify="required" placeholder="请选择年份" readonly class="layui-input">
                                </div>
                            </div>
                            <div id="outputValueSales" class="content-Gdp"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script>

    laydate.render({
        elem: '#gdpYears', //指定元素
        type: 'year',
        range: true,
        //得到日期生成的值，如：2017-08-18
        //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
        //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
        done: function (value, date, endDate) {
            companyOutputValue.gdp.beginYear = date.year;
            companyOutputValue.gdp.endYear = endDate.year;
            companyOutputValue.getGdp();
        }
    });

    laydate.render({
        elem: '#salesYears', //指定元素
        type: 'year',
        range: true,
        //得到日期生成的值，如：2017-08-18
        //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
        //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
        done: function (value, date, endDate) {
            companyOutputValue.sales.beginYear = date.year;
            companyOutputValue.sales.endYear = endDate.year;
            companyOutputValue.getSales();
        }
    });

    Vue.use(VueResource);
    var companyOutputValue = new Vue({
        el: "#companyOutputValue",
        data: {
            company: {
                id: getUrlPara("id"),
                name: null,
                address: null,
                contact: null,
                contactWay: null,
                description: null
            },
            gdp: {
                beginYear: yearAfter(10),
                endYear: currentYear(),
                years: null
            },
            sales: {
                beginYear: yearAfter(10),
                endYear: currentYear(),
                years: null
            }
        },
        methods: {
            getCompany: function () {
                this.$http.get(getHttpServer() + "/api/web/company/" + this.company.id)
                    .then(function (response) {
                        if (response.data.code === 0) {
                            this.company = response.data.data
                        }
                    }).catch(function (response) {

                    });
            },
            getGdp: function () {
                this.gdp.years = this.gdp.beginYear + " - " + this.gdp.endYear;
                this.$http.get(getHttpServer() + "/api/web/statistical/company/" + this.company.id + "/gdp/" + this.gdp.beginYear + "/" + this.gdp.endYear)
                    .then(function (response) {
                        var outputValueGdp = response.data.data;
                        var outputValueGdpChart = echarts.init(document.getElementById('outputValueGdp'));
                        var outputValueGdpOption = {
                            title: {
                                text: this.gdp.beginYear + "~" + this.gdp.endYear + '年GDP'
                            },
                            tooltip: {
                                trigger: 'axis'
                            },
                            legend: {
                                data: ['GDP']
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            xAxis: {
                                type: 'category',
                                boundaryGap: false,
                                data: outputValueGdp.years
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [
                                {
                                    name: 'GDP',
                                    type: 'line',
                                    data: outputValueGdp.gdp
                                }
                            ]
                        };
                        outputValueGdpChart.setOption(outputValueGdpOption);
                    }).catch(function (response) {
                    });
            },
            getSales: function () {
                this.sales.years = this.sales.beginYear + " - " + this.sales.endYear;
                this.$http.get(getHttpServer() + "/api/web/statistical/company/" + this.company.id + "/sales/" + this.sales.beginYear + "/" + this.sales.endYear)
                    .then(function (response) {
                        var outputValueSales = response.data.data;
                        var outputValueSalesChart = echarts.init(document.getElementById('outputValueSales'));
                        var outputValueSalesOption = {
                            title: {
                                text: this.sales.beginYear + "~" + this.sales.endYear + '发展比'
                            },
                            tooltip: {
                                trigger: 'axis'
                            },
                            legend: {
                                data: ['线上', '线下']
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            xAxis: {
                                type: 'category',
                                boundaryGap: false,
                                data: outputValueSales.years
                            },
                            yAxis: {
                                type: 'value',
                                axisLabel: {
                                    formatter: '{value} 个'
                                }
                            },
                            series: [
                                {
                                    name: '线上',
                                    type: 'line',
                                    data: outputValueSales.online
                                },
                                {
                                    name: '线下',
                                    type: 'line',
                                    data: outputValueSales.offline
                                }
                            ]
                        };
                        outputValueSalesChart.setOption(outputValueSalesOption);
                    }).catch(function (response) {
                    });
            }
        }
    });

    companyOutputValue.getCompany();
    companyOutputValue.getGdp();
    companyOutputValue.getSales();
</script>

</html>